
<!DOCTYPE html>
<html lang="en">
 
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			div.content {
				position: relative;
				width: 512px;
				height: 320px;
				margin: 80px auto;
			}


			ul {
				list-style-type: none;
			}
			
			ul.uIndex {
				position: absolute;
				bottom: 10px;
				left: 135px;
			}
			
			ul.uItems li {
				position: absolute;
			}
			
			ul.uItems li img {
				width: 512px;
			}
			
			div.btn {
				width: 40px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				background: #4d4d4d;
				opacity: .8;
				color: white;
				font-size: 20px;
				position: absolute;
			}
			
			div.btnPrev {
				top: 130px;
			}
			
			div.btnNext {
				top: 130px;
				right: 0;
			}
			
			ul.uIndex li {
				width: 30px;
				height: 30px;
				background: #11c1f3;
				text-align: center;
				line-height: 30px;
				color: white;
				border-radius: 50%;
				float: left;
				margin-right: 10px;
			}
			
			ul.uIndex li.bg {
				background: #e42012;
			}
		</style>
		<script src="./jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			var showIndex = 0;
			var timer;
			// jquery
			$(function() {
				$("ul.uItems li").not(":eq(0)").css("display", "none");//将其他图片都隐藏
				startTimer();
 
				$("ul.uIndex li").hover(function() {
					// 鼠标悬浮在小圆点时，停止自动播放图片，清除计时器【每隔多少秒执行一次函数】
					clearInterval(timer);
					// console.log($(this).index());
					showIndex = $(this).index();//将当前元素的索引号赋值给showIndex值
					showImg();
				}, function() {
					startTimer();
				});
 
				$(".btnPrev").click(function() {
					clearInterval(timer);
					if(showIndex == 0) showIndex = 4;
					showIndex--;
					showImg();
					startTimer();
				});
 
				$(".btnNext").click(function() {
					clearInterval(timer);
					if(showIndex == 5) showIndex = -1;
					showIndex++;
					showImg();
					startTimer();
				});
			});
 
 			// js
			function startTimer() {
				// 设置计时器
				timer = setInterval(function() {
					showIndex++;
					// 当showIndex=4时，是表示第五张图片
					if(showIndex >= 4) showIndex = 0;
					showImg();
				}, 2000);
			}
 
			function showImg() {
				// $("ul.uItems li").stop();//停止
				$("ul.uItems li").stop().fadeOut(1000).eq(showIndex).fadeIn(1000);//所有li淡出，li[index]淡入
				$("ul.uIndex li").removeClass("bg").eq(showIndex).addClass("bg");//所有li移除类，li[index]添加类  动态改变小圆点的背景颜色
			}
		</script>
	</head>
 
	<body>
		<div class="content">
			<ul class="uItems">
				<li><img src="./0.jpg" /></li>
				<li><img src="./1.jpeg" /></li>
				<li><img src="./2.jpg" /></li>
				<li><img src="./3.jpg" /></li>
			</ul>
			<div class="btn btnPrev"><</div>
			<div class="btn btnNext">></div>
			<ul class="uIndex">
				<li class="bg">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</body>
 
</html>
 